<template>
  <div>
    <div class="bread-crumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>大屏展示</el-breadcrumb-item>
        <el-breadcrumb-item>列表</el-breadcrumb-item>
        <el-breadcrumb-item>用户列表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-card class="user-card" style="margin-bottom:20px">
      <el-row>
        <el-col :span="8"
          ><div>
            <el-input
              placeholder="请输入内容"
              v-model="searchContent"
              @change="search"
            >
              <el-button
                slot="append"
                icon="el-icon-search"
                @click="search"
              ></el-button>
            </el-input></div
        ></el-col>
        <el-col :span="2"><el-button @click="search">查询</el-button></el-col>
        <el-col :span="1"> <el-button @click="addDialog">+</el-button></el-col>
      </el-row>
    </el-card>
    <el-card>
      <el-table
        :data="user_mes"
        :header-cell-style="{ color: '#000', 'text-align': 'center' }"
        :cell-style="{ color: '#000', 'text-align': 'center' }"
        border
      >
        <el-table-column label="id" type="index"></el-table-column>
        <el-table-column prop="user_name" label="员工名称"></el-table-column>
        <el-table-column prop="user_job" label="职称"></el-table-column>
        <el-table-column prop="user_money" label="薪资待遇"></el-table-column>
        <el-table-column
          prop="user_experience"
          label="工作经验"
        ></el-table-column>
        <el-table-column prop="user_state" label="工作状态">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.user_state"> </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="250">
          <template slot-scope="scope">
            <el-button @click="() => edit(scope.row)" size="mini"
              >编辑</el-button
            >
            <el-button @click="deleteRow(scope.row.id)" size="mini"
              >删除</el-button
            >
            <el-tooltip
              class="item"
              effect="dark"
              content="更改状态"
              placement="top"
              :enterable="false"
            >
              <el-button size="mini">权限</el-button></el-tooltip
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[1, 3, 5, 7]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        style="margin:10px 5px"
      >
      </el-pagination>
    </el-card>
    <addDialog
      :dialogVisible="dialogVisible"
      :user_mes="user_mes"
      @closeDialog="closeDialog"
    ></addDialog>
    <editDialog
      :dialogVisible="dialogVisible"
      :rowData="rowData"
      @closeDialog="closeDialog"
      @editData="editData"
    ></editDialog>
  </div>
</template>

<script>
import { getUserData } from "@/utils/user.js";
import addDialog from "./addDialog.vue";
import editDialog from "./edit.vue";
export default {
  components: { addDialog, editDialog },
  data() {
    return {
      searchContent: "",
      user_mes: [],
      bask: [],
      searchData: [],
      currentPage: 1,
      pageSize: 1,
      total: 7,
      dialogVisible: false,
      rowData: {},
    };
  },
  methods: {
    async getUserData() {
      const res = await getUserData();
      this.user_mes = res;
      this.bask = JSON.parse(JSON.stringify(this.user_mes));
      this.total = res.length;
    },

    handleSizeChange(val) {
      this.pageSize = val;
      this.change();
      // this.getUserData()
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.change();
      // this.getUserData()
    },
    change() {
      this.user_mes = this.bask.slice(
        (this.currentPage - 1) * this.pageSize,
        this.currentPage * this.pageSize
      );
    },
    // 查询
    search() {
      this.user_mes = this.bask;
      this.searchData = [];
      this.user_mes.forEach((val) => {
        if (val.user_name.includes(this.searchContent) === true) {
          this.searchData.push(val);
        }
      });
      this.user_mes = this.searchData;
    },
    deleteRow(id) {
      this.user_mes.forEach((val) => {
        if (id == val.id) {
          this.user_mes.splice(val.id, 1);
        }
      });
    },
    // 关闭弹窗
    closeDialog() {
      this.dialogVisible = !this.dialogVisible;
    },
    // 编辑
    edit(row) {
      this.closeDialog();
      this.rowData = JSON.parse(JSON.stringify(row));
    },
    editData(row) {
      this.user_mes.forEach((val,index) => {
        if (val.id == row.id) {
        this.user_mes[index] = row;
          console.log(val);
        }
      });
    },
    // 添加
    addDialog() {
      this.closeDialog();
    },
  },
  mounted() {
    this.getUserData();
  },
};
</script>
<style lang="less" scoped>
.bread-crumb {
  margin-bottom: 20px;
}
.user-card {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1) !important;
}
</style>
